<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    tr{
        text-align: center;
    }
    </style>
    <script>
       
        function show(){
            console.log('111');
            // 请求数据 ajax
            // 1，创建xhr对象
           var xhr= new XMLHttpRequest();
            // 4,打开状态码的改变
            var str="";
            xhr.onreadystatechange=function(){
                if(xhr.readyState == 4 && xhr.status==200){
                   console.log(JSON.parse(xhr.responseText));  
                   var data = JSON.parse(xhr.responseText);
                   
                   for(var i=0;i<data.length;i++){
                       data[i]
                       str+=`
                       <tr>
            <td>${data[i].uid}</td>
            <td>${data[i].uname}</td>
            <td>${data[i].upwd}</td>
            <td>
                <a href="">更新</a>
                <a href="">删除</a>
            </td>
        </tr>
                       `
                   }
             var tbody = document.getElementById('tbody')
               tbody.innerHTML=str;
                }
            }
           // 2 打开连接 创建请求
            // 请求方式  请求地址  是否异步
           xhr.open("get","/list",true)
           // 3, 发送请求
           xhr.send()
          

            // 拼接格式
            // 写入到页面

        }
    </script>
</head>
<body onload="show()">
    <h1>登录成功</h1>
    <table border="1" width="800" align="center">
        <tr>
            <th>ID</th>
            <th>账号</th>
            <th>密码</th>
            <th>操作</th>
        </tr>
        <tbody id="tbody">

        </tbody>
        
    </table>
</body>
</html>